<template>
    <div>
        <!--个人信息-->
        <div class="d0">
            <van-image round width="5rem" height="5rem" @click="onRea()"
                src="https://img2.baidu.com/it/u=1380163893,42973102&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" />
            <div class="d1">
                <h3 style="margin-left: 20px; margin-top: 5px; font-family: 宋体;">Aseglish</h3>
                <div class="d2">
                    <div @click="onMouse()">关注</div>
                    <div @click="onNouse()">粉丝</div>
                </div>
            </div>
        </div>
        <!--我喜欢收藏的歌单-->
        <div class="d3">
            <div>
                <div style="font-family: 宋体; font-size: 15px; color: deepskyblue; padding-top: 20px; background-color:  white;" >我喜欢的音乐</div>
                <van-swipe-cell>
                    <van-card num="心动模式" desc="173首*2149次播放" title="我喜欢" class="goods-card" 
                        thumb="https://img0.baidu.com/it/u=3924362688,2091461162&fm=253&fmt=auto&app=138&f=GIF?w=224&h=224"/>
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>
            </div>
            <div>
                <div style="font-family: 宋体; font-size: 15px; color: deepskyblue; padding-top: 20px; background-color: white;">我收藏的歌单</div>
                <van-swipe-cell>
                    <van-card desc="549首" title="超燃打游戏必备" class="goods-card"
                        thumb="https://img0.baidu.com/it/u=1788099812,824228825&fm=253&fmt=auto?w=500&h=500" />
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>
                <van-swipe-cell>
                    <van-card  desc="173首" title="节奏和热血犯困时听" class="goods-card"
                        thumb="https://img1.baidu.com/it/u=3820698236,3964358011&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" />
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>
                <van-swipe-cell>
                    <van-card  desc="83首" title="欧美励志" class="goods-card"
                        thumb="https://img2.baidu.com/it/u=1328250839,309745706&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" />
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>
                
            </div>
        </div>
    </div>
</template>
<script setup>
import { showDialog } from 'vant';
import { showImagePreview } from 'vant';
function onRea(){
    showImagePreview([
  'https://img2.baidu.com/it/u=1380163893,42973102&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
]);
}



function onMouse(){
    showDialog({
  message: '您还没有关注任何人！！！',
}).then(() => {
  // on close
});
}

function onNouse(){
    showDialog({
  message: '没有人关注您哦！！！',
}).then(() => {
  // on close
});
}




</script>
<style scoped>
.d0 {
    display: flex;
}

.d1 {
    width: 300px;
    height: 75px;
    margin-top: 10px;
    background-color: rgb(247, 221, 225);
    margin-left: 5px
}

.d2 {
    display: flex;
    justify-content: space-around;
    font-family: 宋体;
    font-size: 15px;
    padding-top: 30px;
}

.d3 {
    width: 340px;
    height: 470px;
    margin-top: 10px;
    margin-left: 15px;
    font-family: 宋体;
    font-size: 10px;
    background-color: rgb(247, 221, 225);
}
.goods-card {
    margin-top: 10px;
    background-color: rgb(255, 240, 240);
    font-size: 15px;
}

.delete-button {
    height: 100%;
}
</style>